<template>
     <div class="jx-big">    
         <div class="jx-info">
            <h3 class="fl">基本信息</h3>
        </div>
        <div class="forms">
            <div class="forms">
                <el-form :model="form" :rules="rules" ref="form" >
                    <el-form-item label="工号" prop="number" style="width:80%;">
                        <el-input type="password" v-model="form.number" auto-complete="new-oldpassWord" ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name" style="width:80%;">
                        <el-input type="password" v-model="form.name" auto-complete="new-password"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号"  prop="telephone" style="width:80%;">
                        <el-input type="password" v-model="form.telephone" auto-complete="new-checkPass"></el-input>
                    </el-form-item>
                     <el-form-item label="邮箱"  prop="email" style=" position:relative">
                        <el-input type="password" v-model="form.email" auto-complete="new-checkPass"></el-input>
                        <div class="switchflag">
                            <el-switch
                            v-model="form.switch"
                            active-color="#13ce66">
                            </el-switch>
                            <el-tooltip class="item" effect="dark" content="学生端的邮箱信息的隐藏/显示" placement="bottom-start">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </div>
                        
                    </el-form-item>
                     <el-form-item label="性别"  prop="sex" style="width:80%;">
                         <el-radio-group v-model="form.sex">
                             <el-radio :label="1">男</el-radio>
                             <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="button-style savefn" @click="saveFn('formDtae')" >保 存</div>
                </el-form>
           </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                 form: {
                    number: '',
                    name: '',
                    telephone: '',
                    email:'',
                    sex:'',
                    switch:true
                },
            }
        }
    }
</script>
<style scoped>
   .el-input>>>.el-input__inner{
        width: 250px;
        height: 38px;
        line-height: 38px;
    }
   .el-select>>>.el-input__inner{
       width: 250px;
        height: 38px;
        line-height: 38px;
   }
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 50px;
    padding-top: 20px;
    .jx-info{
        overflow: hidden;
        &>h3{
            height: 32px;
            line-height: 32px;
            font-size: $fs18
        }
    }
    .forms{
        margin: 28px 0;
        .savefn{
            margin:20px 30px 20px 0;
        }
        .switchflag{
            position: absolute;
            left: 272px;
            top: 42px;
            .el-icon-question{
                font-size: $fs18;
                margin-left: 10px;
                &:hover{
                    color: #1b7cec;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>